<div class="dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
        <h2><i class="fas fa-home"></i> 欢迎使用政府公文知识库管理系统</h2>
        <p class="welcome-text">这里是政府公文管理的智能平台，为您提供便捷的公文管理、知识检索和智能写作辅助功能。</p>
    </div>

    <!-- 快捷操作卡片 -->
    <div class="card-container">
        <div class="card quick-card" data-page="pages/knowledge.html" data-id="knowledge">
            <div class="card-icon bg-blue">
                <i class="fas fa-file-alt"></i>
            </div>
            <h3>公文管理</h3>
            <p>查看、编辑政府公文知识库</p>
        </div>

        <div class="card quick-card" data-page="pages/ai.html" data-id="ai">
            <div class="card-icon bg-green">
                <i class="fas fa-robot"></i>
            </div>
            <h3>智能写作</h3>
            <p>AI辅助公文写作</p>
        </div>

        <div class="card quick-card" data-page="pages/statistics.html" data-id="statistics">
            <div class="card-icon bg-orange">
                <i class="fas fa-chart-bar"></i>
            </div>
            <h3>数据分析</h3>
            <p>公文数据统计与分析</p>
        </div>

        <div class="card quick-card" data-page="pages/templates.html" data-id="">
            <div class="card-icon bg-purple">
                <i class="fas fa-copy"></i>
            </div>
            <h3>公文模板</h3>
            <p>常用公文模板库</p>
        </div>
    </div>

    <!-- 最近公文 -->
    <div class="recent-section">
        <div class="section-header">
            <h3><i class="fas fa-history"></i> 最近公文</h3>
            <a href="javascript:void(0)" onclick="loadContent('knowledgeList.html')">查看全部</a>
        </div>

        <table class="recent-table">
            <thead>
            <tr>
                <th>公文编号</th>
                <th>公文标题</th>
                <th>公文类型</th>
                <th>发文单位</th>
                <th>发文日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>政发〔2023〕12号</td>
                <td>关于进一步加强疫情防控工作的通知</td>
                <td>通知</td>
                <td>市人民政府办公室</td>
                <td>2023-06-15</td>
                <td>
                    <button class="btn-view"><i class="fas fa-eye"></i> 查看</button>
                </td>
            </tr>
            <tr>
                <td>政办函〔2023〕56号</td>
                <td>关于2023年度重点项目推进情况的报告</td>
                <td>报告</td>
                <td>市发展改革委</td>
                <td>2023-06-10</td>
                <td>
                    <button class="btn-view"><i class="fas fa-eye"></i> 查看</button>
                </td>
            </tr>
            <tr>
                <td>政办发〔2023〕34号</td>
                <td>关于印发《2023年政务公开工作要点》的通知</td>
                <td>通知</td>
                <td>市政府办公室</td>
                <td>2023-05-28</td>
                <td>
                    <button class="btn-view"><i class="fas fa-eye"></i> 查看</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 系统统计 -->
    <div class="stats-section">
        <div class="stat-card">
            <div class="stat-value">1,258</div>
            <div class="stat-label">公文总量</div>
            <div class="stat-trend"><i class="fas fa-arrow-up"></i> 12% 较上月</div>
        </div>

        <div class="stat-card">
            <div class="stat-value">326</div>
            <div class="stat-label">本月新增</div>
            <div class="stat-trend"><i class="fas fa-arrow-up"></i> 8% 较上月</div>
        </div>

        <div class="stat-card">
            <div class="stat-value">24</div>
            <div class="stat-label">公文类型</div>
            <div class="stat-trend"><i class="fas fa-arrow-right"></i> 持平</div>
        </div>

        <div class="stat-card">
            <div class="stat-value">85</div>
            <div class="stat-label">本周访问量</div>
            <div class="stat-trend"><i class="fas fa-arrow-up"></i> 15% 较上周</div>
        </div>
    </div>
</div>

<style>
    /* 首页特有样式 */
    .dashboard {
        margin:0;
        padding: 0 15px;
    }

    .welcome-section {
        background: linear-gradient(135deg, #e6f0ff, #ffffff);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
        border-left: 4px solid #1a5fb4;
    }

    .welcome-section h2 {
        color: #1a5fb4;
        margin-bottom: 10px;
        font-size: 22px;
        display: flex;
        align-items: center;
    }

    .welcome-section h2 i {
        margin-right: 10px;
    }

    .welcome-text {
        color: #555;
        line-height: 1.6;
    }

    /* 卡片样式 */
    .card-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .quick-card {
        text-align: center;
    }

    .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        color: white;
        font-size: 24px;
    }

    .card h3 {
        margin-bottom: 8px;
        color: #333;
    }

    .card p {
        color: #666;
        font-size: 14px;
    }

    .bg-blue {
        background-color: #1a5fb4;
    }

    .bg-green {
        background-color: #26a269;
    }

    .bg-orange {
        background-color: #e66100;
    }

    .bg-purple {
        background-color: #813d9c;
    }

    /* 最近公文部分 */
    .recent-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }

    .section-header h3 {
        color: #333;
        font-size: 18px;
        display: flex;
        align-items: center;
    }

    .section-header h3 i {
        margin-right: 10px;
        color: #1a5fb4;
    }

    .section-header a {
        color: #1a5fb4;
        text-decoration: none;
        font-size: 14px;
    }

    .section-header a:hover {
        text-decoration: underline;
    }

    .recent-table {
        width: 100%;
        border-collapse: collapse;
    }

    .recent-table th,
    .recent-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .recent-table th {
        background-color: #f5f7fa;
        color: #555;
        font-weight: 500;
    }

    .recent-table tr:hover {
        background-color: #f5f7fa;
    }

    .btn-view {
        background-color: #1a5fb4;
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        transition: background-color 0.3s;
    }

    .btn-view:hover {
        background-color: #0d47a1;
    }

    .btn-view i {
        margin-right: 5px;
    }

    /* 统计卡片 */
    .stats-section {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .stat-card {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        text-align: center;
    }

    .stat-value {
        font-size: 32px;
        font-weight: bold;
        color: #1a5fb4;
        margin-bottom: 5px;
    }

    .stat-label {
        color: #666;
        margin-bottom: 5px;
    }

    .stat-trend {
        font-size: 14px;
        color: #26a269;
    }

    .stat-trend i {
        margin-right: 3px;
    }

    @media (max-width: 768px) {
        .card-container {
            grid-template-columns: 1fr 1fr;
        }

        .stats-section {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 480px) {
        .card-container {
            grid-template-columns: 1fr;
        }

        .stats-section {
            grid-template-columns: 1fr;
        }
    }
</style>